<template>
  <div>
    <!-- div就是渲染出来的图表.,类似背景图,需要给div 设置宽高 -->
    <div ref="echarts" style="width: 400px;height: 500px;"></div>
  </div>
</template>

<script>
// echarts是一个js的图表库,把数据变成图
import * as echarts from 'echarts';
export default {
  mounted () {
    this.bar()
  },
  methods: {
    // 柱状图,标题,x轴数据,y轴,系列(多个数据)
    bar () {
      // 初始化一个图表的对象,空对象
      const obj = echarts.init(this.$refs.echarts)
      obj.setOption({
        title: {
          text: '淘宝盈利',
          // 是否显示标题
          show: true,
          link: "http://www.taobao.com",
          textStyle: {
            // 颜色
            color: "red",
            // 是否倾斜
            fontStyle: 'italic',
            // 粗细
            fontWeight: 200,
            fontSize: 20,
            width: 100,
            height: 200
          },
          // 内边距
          // padding: 20,
          // borderWidth: 10,
          textAlign: 'center',
          left: '50%',
          backgroundColor: 'rgba(255, 0, 0, 0.3)',
          // 副标题\r\n
          subtext: '我是副标题',
          sublink: "http://www.baidu.com",
          subtextStyle: {
            // 颜色
            color: "#00ff00",
            // 是否倾斜
            fontStyle: 'italic',
            // 粗细
            fontWeight: 200,
            fontSize: 12
          }
        },
        // 柱状图
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
